﻿@inject IJSRuntime JS

@if (showNav)
{
    <div class="almanac-nav-card">
        <a class="logo" aria-label="主页" @onclick="@(()=>Nav("almanac-home-card"))"></a>
        <a class="previous-button" @onclick="Previous">
            <div></div>
        </a>
        <a class="catalog-button" @onclick="@(()=>NavCatalog())">
            <div></div>
        </a>
        <a class="next-button" @onclick="Next">
            <div></div>
        </a>
    </div>

}

@code {
    [Parameter]
    [EditorRequired]
    public string LayoutId { get; set; }

    int totalPage;
    int currentPage;
    double pageWidth;
    string pageString;

    bool showNav = true;

    bool naving = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await GetPageInfo();
            await Task.Delay(500);
            await GetPageInfo();
        }
    }


    public async Task GetPageInfo()
    {
        try
        {
            var left = await JS.InvokeAsync<double>("getElementScrollLeft", LayoutId);
            var totalWidth = await JS.InvokeAsync<double>("getElementScrollWidth", LayoutId);
            var screenWidth = await JS.InvokeAsync<double>("getBodyClientWidth");

            if (showNav)
            {
                screenWidth -= 64;
            }

            pageWidth = (screenWidth / 2);
            totalPage = (int)Math.Ceiling(totalWidth / pageWidth);
            currentPage = (int)Math.Round(left / pageWidth) + 1;

            pageString = $"{currentPage} / {totalPage - 1}";
            StateHasChanged();
        }
        catch
        {

        }
    }

    public async Task Next()
    {
        if (naving)
        {
            return;
        }
        naving = true;
        try
        {
            if (currentPage < totalPage)
            {
                currentPage += 2;
                await JS.InvokeVoidAsync("setElementScrollLeft", LayoutId, (currentPage - 1) * pageWidth);
            }
            else
            {
                await GetPageInfo();
            }
            StateHasChanged();
        }
        catch
        {

        }
        await Task.Delay(200);
        naving = false;
    }

    public async Task Previous()
    {
        if (naving)
        {
            return;
        }
        naving = true;
        try
        {
            if (currentPage >= 1)
            {
                currentPage -= 2;
                await JS.InvokeVoidAsync("setElementScrollLeft", LayoutId, (currentPage - 1) * pageWidth);
            }
            else
            {
                await GetPageInfo();
            }
        }
        catch
        {

        }
        await Task.Delay(200);
        naving = false;
    }

    public async Task NavEnd()
    {
        if (naving)
        {
            return;
        }
        naving = true;

        try
        {
            await JS.InvokeVoidAsync("setElementScrollLeft", LayoutId, (totalPage - 2) * pageWidth);
            await Task.Delay(500);
            await GetPageInfo();
        }
        catch
        {

        }


        naving = false;
    }

    public async Task Nav(string id)
    {
        if (naving)
        {
            return;
        }
        naving = true;
        try
        {
            var left = await JS.InvokeAsync<double>("getElementLeftOfLayout", id) + await JS.InvokeAsync<double>("getElementScrollLeft", LayoutId);
            var page = (int)Math.Round(left / pageWidth);
            await JS.InvokeVoidAsync("setElementScrollLeft", LayoutId, page * pageWidth);
            await Task.Delay(500);
            await GetPageInfo();
        }
        catch
        {

        }
        naving = false;
    }

    public async Task OnKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            await Next();
        }
        else if (e.Key == "ArrowRight" || e.Key == "ArrowDown" || e.Key == "d" || e.Key == "s" || e.Key == "PageDown")
        {
            await Next();
        }
        else if (e.Key == "ArrowLeft" || e.Key == "ArrowUp" || e.Key == "a" || e.Key == "w" || e.Key == "PageUp")
        {
            await Previous();
        }
        else if (e.Key == "Escape" || e.Key == "Home")
        {
            await Nav("almanac-home-card");
        }
        else if (e.Key == "End")
        {
            await NavEnd();
        }
    }

    public async Task NavCatalog()
    {
        var ids = new[] { "almanac-next-card", "almanac-inside-card", "almanac-game-list-card", "almanac-catalog-card" };
        foreach (var item in ids)
        {
            var left = await JS.InvokeAsync<double>("getElementLeftOfLayout", item);
            if (left < 0)
            {
                await Nav(item);
                return;
            }
            else if (left < pageWidth * 2)
            {
                await Nav("almanac-catalog-card");
                return;
            }
        }
    }

}
